<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="zh-CN">
	<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
	<meta name="Description"
		content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
	<title>SuperSlide - 图片滚动特效-左</title>
	<script type="text/javascript" src="../js/jquery1.42.min.js"></script>
	<script type="text/javascript" src="../js/jquery.SuperSlide.2.1.3.js"></script>
</head>

<body>



	<style type="text/css">
		/* css 重置 */
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		body {
			background: #fff;
			font: normal 12px/22px 宋体;
		}

		img {
			border: 0;
		}

		a {
			text-decoration: none;
			color: #333;
		}

		/* 本例子css */
		.picScroll-left {
			overflow: hidden;
			position: relative;
			border: 1px solid #ccc;
		}

		.picScroll-left .hd {
			overflow: hidden;
			height: 30px;
			background: #f4f4f4;
			padding: 0 10px;
		}

		.picScroll-left .hd .prev,
		.picScroll-left .hd .next {
			display: block;
			width: 5px;
			height: 9px;
			float: right;
			margin-right: 5px;
			margin-top: 10px;
			overflow: hidden;
			cursor: pointer;
			background: url("../images/arrow.png") 0 0 no-repeat;
		}

		.picScroll-left .hd .next {
			background-position: 0 -50px;
		}

		.picScroll-left .hd .prevStop {
			background-position: -60px 0;
		}

		.picScroll-left .hd .nextStop {
			background-position: -60px -50px;
		}

		.picScroll-left .hd ul {
			float: right;
			overflow: hidden;
			zoom: 1;
			margin-top: 10px;
			zoom: 1;
		}

		.picScroll-left .hd ul li {
			float: left;
			width: 9px;
			height: 9px;
			overflow: hidden;
			margin-right: 5px;
			text-indent: -999px;
			cursor: pointer;
			background: url("../images/icoCircle.gif") 0 -9px no-repeat;
		}

		.picScroll-left .hd ul li.on {
			background-position: 0 0;
		}

		.picScroll-left .bd {
			padding: 10px;
		}

		.picScroll-left .bd ul {
			overflow: hidden;
			zoom: 1;
		}

		.picScroll-left .bd ul li {
			margin: 0 8px;
			float: left;
			_display: inline;
			overflow: hidden;
			text-align: center;
		}

		.picScroll-left .bd ul li .pic {
			text-align: center;
		}

		.picScroll-left .bd ul li .pic img {
			width: 120px;
			height: 90px;
			display: block;
			padding: 2px;
			border: 1px solid #ccc;
		}

		.picScroll-left .bd ul li .pic a:hover img {
			border-color: #999;
		}

		.picScroll-left .bd ul li .title {
			line-height: 24px;
		}
	</style>

	<div class="picScroll-left">
		<div class="bd">
			<ul class="picList">
				<li>
					<div class="pic"><a href="#"><img src="../imgs/slide-1.jpg" /></a>
					</div>
					<div class="title"><a href="#">背发光1</a></div>
				</li>
				<li>
					<div class="pic"><a href="#"><img src="../imgs/slide-2.jpg" /></a>
					</div>
					<div class="title"><a href="#">迷你字</a></div>
				</li>
				<li>
					<div class="pic"><a href="#"><img src="../imgs/slide-3.jpg" /></a>
					</div>
					<div class="title"><a href="#">背发光2</a></div>
				</li>
				<li>
					<div class="pic"><a href="#"><img src="../imgs/slide-4.jpg" /></a>
					</div>
					<div class="title"><a href="#">效果图4</a></div>
				</li>
				<li>
					<div class="pic"><a href="#"><img src="../imgs/slide-5.jpg" /></a>
					</div>
					<div class="title"><a href="#">效果图5</a></div>
				</li>
				<li>
					<div class="pic"><a href="#"><img src="../imgs/slide-6.jpg" /></a>
					</div>
					<div class="title"><a href="#">发光字</a></div>
				</li>
			</ul>
		</div>
	</div>

	<script id="jsID" type="text/javascript">
		var ary = location.href.split("&");
		jQuery(".picScroll-left").slide({ titCell: ".hd ul", mainCell: ".bd ul", autoPage: true, effect: ary[1], autoPlay: ary[2], scroll: ary[3], vis: ary[4], easing: ary[5], delayTime: ary[6], pnLoop: ary[7], trigger: ary[8], mouseOverStop: ary[9] });
	</script>



</body>

</html>
